import React, { useState, useRef } from 'react'
import { Rnd } from 'react-rnd'
import { BoxInfoProps } from '../../interface'
import { ChannelDeleteIcon, DeleteIcon, ChannelSetIcon } from '../../style'
import ChannelConfig from '../ChannelConfig'
import TVWallContainer from '../../context'
import { t } from 'i18next'

interface CurrentBoxProps {
	item: BoxInfoProps
	index: number
}

export default function BoxConfig() {
	const [isChannelModalShow, setIsChannelModalShow] = useState(false)
	const currentBox = useRef<CurrentBoxProps>()
	const { state, dispatch } = TVWallContainer.useContainer()
	const { boxList } = state

	const setChannel = (boxItem: CurrentBoxProps) => {
		setIsChannelModalShow(true)
		currentBox.current = boxItem
	}

	const deleteChannel = (index: number) => {
		dispatch({
			type: 'changeBoxListParams',
			payLoad: {
				boxIndex: index,
				configObj: { hdu_id: '', hdu_alias: '', channel_id: '' },
			},
		})
	}

	//通道弹窗确认事件
	const handelConfirm = (hduId: string, hduName: string, channelNum: string) => {
		dispatch({
			type: 'changeBoxListParams',
			payLoad: {
				boxIndex: (currentBox.current as CurrentBoxProps).index,
				configObj: { hdu_id: hduId, hdu_alias: hduName, channel_id: channelNum },
			},
		})
	}

	return (
		<>
			{boxList.map((item: BoxInfoProps, index: number) => {
				return (
					<Rnd
						key={index}
						className="box-container"
						bounds="#container"
						minWidth={90}
						size={{ width: item.box_width, height: item.box_height }}
						position={{ x: item.box_x, y: item.box_y }}
						onDragStop={(e, dir) =>
							dispatch({
								type: 'changeBoxListParams',
								payLoad: { boxIndex: index, configObj: { box_x: dir.x, box_y: dir.y } },
							})
						}
						onResize={(e, direction, ref, delta, position) => {
							dispatch({
								type: 'changeBoxListParams',
								payLoad: {
									boxIndex: index,
									configObj: {
										box_width: ref.offsetWidth,
										box_height: ref.offsetHeight,
										box_x: position.x,
										box_y: position.y,
									},
								},
							})
						}}
					>
						<div className="box-item">
							<div className="operates">
								<ChannelSetIcon
									title={t('设置通道')}
									onClick={() => setChannel({ item, index })}
								></ChannelSetIcon>
								<ChannelDeleteIcon
									title={t('删除电视墙')}
									onClick={() => deleteChannel(index)}
								></ChannelDeleteIcon>
								<DeleteIcon
									title={t('删除通道')}
									onClick={() =>
										dispatch({
											type: 'deleteTVwall',
											payLoad: index,
										})
									}
								></DeleteIcon>
							</div>
							<div className="box-article">
								{item.hdu_alias}
								{item.channel_id ? `(${item.channel_id})` : ''}
							</div>
						</div>
					</Rnd>
				)
			})}
			<ChannelConfig
				initialValue={{
					initialId: currentBox.current?.item.hdu_id ?? '',
					initialNum: currentBox.current?.item.channel_id ?? '',
				}}
				isShow={isChannelModalShow}
				setIsShow={setIsChannelModalShow}
				onConfirm={handelConfirm}
			></ChannelConfig>
		</>
	)
}
